<template>
  <div class="new">
    <div class="headerr">
      <span class="shouye" @click="$router.push('/proportal/index')"
        >{{ $t("首页", "allInfoBlock.home") }} /</span
      >
    </div>
    <div class="xuan">
      <div class="top">
        <div>
          <label>{{ $t("分类", "allInfoBlock.catgory") }}</label>
          <el-select
            v-model="search_info.classify"
            size="small"
            :placeholder="$t('请选择', 'allInfoBlock.select')"
          >
            <el-option
              v-for="item in fenLei"
              :key="item.type_id"
              :label="item.type_name"
              :value="item.type_id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <label>{{ $t("标题", "allInfoBlock.title") }}</label>
          <el-input
            v-model="search_info.title"
            size="small"
            suffix-icon="el-icon-search"
            :placeholder="$t('请输入标题名称', 'allInfoBlock.enterTitle')"
          ></el-input>
        </div>
        <div>
          <label>{{ $t("发布时间", "allInfoBlock.pubTime") }}</label>
          <el-date-picker
            v-model="search_info.createTime"
            type="daterange"
            size="small"
            value-format="yyyy-MM-dd"
            range-separator="至"
            :start-placeholder="$t('开始日期', 'allInfoBlock.startTime')"
            :end-placeholder="$t('结束日期', 'allInfoBlock.endTime')"
          >
          </el-date-picker>
        </div>
        <div>
          <label>{{ $t("创建人", "allInfoBlock.creator") }}</label>
          <person-search v-model="search_info.creator" size="small" />
        </div>
      </div>
      <div class="bottom">
        <el-button type="primary" size="small" @click="getList">{{
          $t("查询", "allInfoBlock.search")
        }}</el-button>
        <el-button size="small" @click="reset">{{
          $t("重置", "allInfoBlock.reset")
        }}</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :label="$t('序号', 'allInfoBlock.order')"
          width="50"
        >
        </el-table-column>
        <el-table-column
          :label="$t('标题', 'allInfoBlock.title')"
          prop="title"
        ></el-table-column>
        <el-table-column
          :label="$t('分类', 'allInfoBlock.catgory')"
          prop="type.type_name"
        ></el-table-column>
        <el-table-column
          :label="$t('创建人', 'allInfoBlock.creator')"
          prop="creator"
        >
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.creator" />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('点击数', 'allInfoBlock.clickNum')"
          prop="click_num"
        ></el-table-column>
        <el-table-column
          :label="$t('发布时间', 'allInfoBlock.pubTime')"
          prop="create_time"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :current-page.sync="pageInfo.current_page"
        :page-size="pageInfo.page_size"
        layout="total, sizes, prev, pager, next"
        :total="pageInfo.total"
        style="margin-bottom: 10px; margin-top: 10px"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getTargetList, getTargetTypes } from "@/http/api";
import personSearch from "@/components/public/personSearch.vue";
import ShowPerson from "@/components/public/showPerson.vue";
import dayjs from "dayjs";
export default {
  name: "new",
  components: { personSearch, ShowPerson },
  data() {
    return {
      fenLei: [],
      search_info: {
        classify: "",
        title: "",
        createTime: [],
        creator: {},
      },
      tableData: [],
      pageInfo: {
        current_page: 1,
        page_size: 20,
        total: 20,
        page_sizes: [10, 20, 30, 50],
      },
      from: "",
    };
  },
  async mounted() {
    this.from = this.$route.query.from;
    let res = await getTargetTypes(this.from);
    if (res.code === 20041) {
      this.fenLei = res.data;
    }
    this.getList();
  },
  methods: {
    handleCurrentChange(current) {
      this.pageInfo.current_page = current;
    },
    handleSizeChange(val) {
      this.pageInfo.page_size = val;
    },
    async getList() {
      let res = await getTargetList(this.from, {
        ...this.search_info,
        ...this.pageInfo,
        mode: "personal",
      });
      if (res.code === 20041) {
        this.tableData = res.data.rows;
        this.pageInfo = { ...this.pageInfo, ...res.data.page };
        this.tableData.forEach((item) => {
          item.create_time = dayjs(item.create_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
      }
    },
    reset() {
      this.search_info = {
        classify: "",
        title: "",
        createTime: [],
        creator: {},
      };
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.new {
  width: 100%;
  .shouye {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    cursor: pointer;
  }
  .xuan {
    margin: 16px 0;
    padding: 14px 20px 16px;
    width: 100%;
    height: 138px;
    background-color: #fff;
    border-radius: 8px;
    .top {
      display: flex;
      div {
        flex: 1;
        padding: 0 5px;
        label {
          display: block;
          line-height: 30px;
          height: 30px;
          font-weight: 600;
          font-size: 14px;
          padding-left: 8px;
        }
        .el-select {
          width: 100%;
        }
        /deep/ .el-date-editor .el-range-separator {
          width: 8%;
        }
      }
    }
    .bottom {
      text-align: right;
      margin-top: 16px;
    }
  }
  .table {
    margin-top: 16px;
    padding: 24px 24px 14px;
    background-color: #fff;
    border-radius: 8px;
    height: calc(100vh - 280px);
    .el-table {
      height: calc(100vh - 360px);
    }
    .el-pagination {
      text-align: right;
    }
  }
}
</style>
